<template>
  <div class="DictList">
    <a-row class="aRow-wrapper" :gutter="12">
      <a-col class="listContent-wrapper" :span="24">
        <div class="l-w_content">
          <top-title :updateTime="false" :content="content"></top-title>
          <div class="l-w_c_content">
            <div class="pageInfo">
              <!-- 左侧面板 -->
              <div class="searchContent searchContent_item">
                <a-form layout="inline" @keyup.enter.native="searchQuery">
                  <a-row :gutter="12">
                    <a-col :md="7" :sm="8">
                      <a-form-item label="字典名称" :labelCol="{ span: 4 }" :wrapperCol="{ span: 14 }">
                        <j-input placeholder="请输入字典名称" :maxLength="50" v-model="queryParam.dictName"></j-input>
                      </a-form-item>
                    </a-col>
                    <a-col :md="7" :sm="8">
                      <a-form-item label="字典编号" :labelCol="{ span: 4 }" :wrapperCol="{ span: 14 }">
                        <j-input :maxLength="30" placeholder="请输入字典编号" v-model="queryParam.dictCode"></j-input>
                      </a-form-item>
                    </a-col>
                    <a-col :md="7" :sm="8">
                      <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                        <a-button type="primary" class="searchBtn" @click="searchQuery" icon="search">搜索</a-button>
                        <a-button
                          type="primary"
                          class="resetBtn"
                          @click="searchReset"
                          icon="reload"
                          style="margin-left: 8px"
                        >
                          重置
                        </a-button>
                      </span>
                    </a-col>
                  </a-row>
                </a-form>
              </div>
              <div class="table-operator" style="border-top: 5px">
                <a-button @click="handleAdd" class="BtnStyle" type="primary" icon="plus">添加</a-button>
                <a-button type="primary" icon="download" class="BtnStyle" @click="handleExportXls('字典信息')"
                  >导出</a-button
                >
                <a-upload
                  name="file"
                  :showUploadList="false"
                  :multiple="false"
                  :headers="tokenHeader"
                  accept=".xls,.xlsx,"
                  :action="importExcelUrl"
                  @change="handleImportExcel"
                >
                  <a-button type="primary" class="BtnStyle" icon="import">导入</a-button>
                </a-upload>
                <a-button type="primary" class="BtnStyle" icon="sync" @click="refleshCache()">刷新缓存</a-button>
                <a-button type="primary" class="BtnStyle" icon="hdd" @click="openDeleteList">回收站</a-button>
              </div>

              <a-table
                ref="table"
                rowKey="id"
                size="middle"
                class="tableList"
                :columns="columns"
                :dataSource="dataSource"
                :pagination="ipagination"
                :loading="loading"
                @change="handleTableChange"
              >
                <span slot="action" slot-scope="text, record">
                  <a class="operation" @click="handleEdit(record)">
                    <a-icon type="edit" />
                    编辑
                  </a>
                  <a-divider type="vertical" />
                  <a class="operation" @click="editDictItem(record)"><a-icon type="setting" /> 字典配置</a>
                  <a-divider type="vertical" />
                  <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                    <a class="operation">删除</a>
                  </a-popconfirm>
                </span>
              </a-table>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
    <dict-modal ref="modalForm" @ok="modalFormOk"></dict-modal>
    <!-- 字典类型 -->
    <dict-item-list ref="dictItemList"></dict-item-list>
  </div>
</template>

<script>
import Vue from 'vue'
import { filterObj } from '@/utils/util'
import { getAction } from '@/api/manage'
import DictItemList from './DictItemList'
import DictModal from './modules/DictModal'
import topTitle from '@/components/topTitle'
import JInput from '@/components/jeecg/JInput'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { UI_CACHE_DB_DICT_DATA } from '@/store/mutation-types'

export default {
  name: 'DictList',
  mixins: [JeecgListMixin],
  components: { DictModal, DictItemList, JInput, topTitle },
  data() {
    return {
      content: [['数据字典']],
      description: '这是数据字典页面',
      visible: false,
      // 查询条件
      queryParam: {
        dictCode: '',
        dictName: '',
      },
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 120,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '字典名称',
          align: 'center',
          ellipsis: true,
          dataIndex: 'dictName',
        },
        {
          title: '字典编号',
          align: 'center',
          ellipsis: true,
          dataIndex: 'dictCode',
        },
        {
          title: '描述',
          align: 'center',
          ellipsis: true,
          dataIndex: 'description',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      dict: '',
      labelCol: {
        xs: { span: 8 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 16 },
        sm: { span: 19 },
      },
      url: {
        delete: '/sys/dict/delete',
        exportXlsUrl: 'sys/dict/exportXls',
        refleshCache: 'sys/dict/refleshCache',
        queryAllDictItems: 'sys/dict/queryAllDictItems',
        list: '/sys/dict/page',
        importExcelUrl: 'sys/dict/import_excel',
      },
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {
    getQueryParams() {
      var param = Object.assign({}, this.queryParam, this.isorter)
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      if (this.superQueryParams) {
        param['superQueryParams'] = encodeURI(this.superQueryParams)
        param['superQueryMatchType'] = this.superQueryMatchType
      }
      return filterObj(param)
    },
    //取消选择
    cancelDict() {
      this.dict = ''
      this.visible = false
      this.loadData()
    },
    //编辑字典数据
    editDictItem(record) {
      this.$refs.dictItemList.edit(record)
    },
    // 重置字典类型搜索框的内容
    searchReset() {
      var that = this
      that.queryParam.dictName = ''
      that.queryParam.dictCode = ''
      that.loadData(this.ipagination.current)
    },
    // openDeleteList () {
    //   this.$refs.dictDeleteList.show()
    // },
    refleshCache() {
      getAction(this.url.refleshCache)
        .then((res) => {
          if (res.success) {
            //重新加载缓存
            getAction(this.url.queryAllDictItems).then((res) => {
              if (res.success) {
                Vue.ls.remove(UI_CACHE_DB_DICT_DATA)
                Vue.ls.set(UI_CACHE_DB_DICT_DATA, res.result, 7 * 24 * 60 * 60 * 1000)
              }
            })
            this.$message.success('刷新缓存完成！')
          }
        })
        .catch((e) => {
          this.$message.warn('刷新缓存失败！')
          console.log('刷新失败', e)
        })
    },
  },
  watch: {
    openKeys(val) {
      console.log('openKeys', val)
    },
  },
}
</script>
<style lang="less">
@import '~@/assets/less/common.less';

.DictList {
  width: 100%;
  height: 100%;
  .pageInfo {
    width: 100%;
    height: 100%;
  }
  .listContent-wrapper .l-w_content {
    margin-left: 0;
  }
}
</style>
